import React from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import { Icon } from 'react-native-elements';

const styles = StyleSheet.create({
  buttonGroup: {
    flexDirection: 'row',
    alignItems: 'center',
  },
  count: {
    width: 80,
    textAlign: 'center'
  },
});

export default ({onAdd, onSubtract, count, unit}) => (
  <View style={styles.buttonGroup}>
    <TouchableOpacity onPress={onSubtract}><Icon size={28} name='remove' color='red'/></TouchableOpacity>
    <Text style={styles.count}>{`${count} ${unit}`}</Text>
    <TouchableOpacity onPress={onAdd}><Icon size={28} name='add' color='green'/></TouchableOpacity>
  </View>
);